<script setup lang="ts">
import { compact, get } from 'lodash-es'
import { ElButton, ElInput } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { Table } from '@/components/Table'
import { getHotelListApi, delHotelListApi } from '@/api/hotel'
import { getConstantValuesApi } from '@/api/constant-value'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { TableColumn } from '@/types/table'
import { Search, SearchItem } from '@/components/Search'
import { Hotel } from '@/api/hotel/types'

defineOptions({
  name: 'Hotel'
})

const { push } = useRouter()

const { register, tableObject, methods } = useTable<Hotel>({
  getListApi: getHotelListApi,
  delListApi: delHotelListApi
})

const { getList, setSearchParams } = methods

getList()

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'code',
    label: '代码',
    width: '100px',
    align: 'left',
    sortable: 'custom'
  },
  {
    field: 'name',
    label: '名称',
    width: '200px',
    showOverflowTooltip: true
  },
  {
    field: 'star',
    label: '星级',
    width: '80px',
    formatter: (row: Hotel) => {
      return starMap.value[row.star as string]
    }
  },
  {
    field: 'group',
    label: '集团',
    width: '100px'
  },
  {
    field: 'owner',
    label: '业主',
    width: '100px'
  },
  {
    field: 'full_address',
    label: '地址',
    formatter: (row: Hotel) => {
      return compact([get(row, 'state.name'), get(row, 'city'), get(row, 'address')]).join(' / ')
    }
  },
  {
    field: 'rooms',
    label: '房间数',
    width: '80px'
  },
  {
    field: 'begin_date',
    label: '开始日期',
    width: '120px'
  },
  {
    field: 'end_date',
    label: '结束日期',
    width: '120px'
  },
  {
    field: 'contact_name',
    label: '联系人',
    width: '100px',
    showOverflowTooltip: true
  },
  {
    field: 'contact_phone',
    label: '联系电话',
    width: '120px'
  },
  {
    field: 'action',
    width: '120px',
    label: '操作',
    headerAlign: 'center',
    align: 'center'
  }
])

const AddAction = () => {
  push('/system/hotel-add')
}

const EditAction = (row: Hotel) => {
  push(`/system/hotel-edit/id/${row.id}`)
}

const delLoading = ref(false)

const delData = async (row: Hotel) => {
  tableObject.currentRow = row
  const { delList } = methods
  delLoading.value = true
  await delList([tableObject.currentRow?.id as string], false).finally(() => {
    delLoading.value = false
  })
}

const instance = reactive({
  code: '',
  name: ''
})

const starMap = ref<Array<CuOption>>([])
getConstantValuesApi('stars', 'starMap').then((res) => {
  starMap.value = res.data.starMap
})
</script>

<template>
  <Search :model="instance" @search="setSearchParams" @reset="setSearchParams">
    <SearchItem label="主体代码" prop="code">
      <ElInput v-model="instance.code" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="主体名称" prop="name">
      <ElInput v-model="instance.name" maxlength="200" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>主体列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="AddAction">新建</ElButton>
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      :selection="false"
      @register="register"
    >
      <template #action="{ row }">
        <ElButton type="primary" link size="small" @click="EditAction(row)"> 编辑 </ElButton>
        <ElButton type="danger" link size="small" @click="delData(row)"> 删除 </ElButton>
      </template>
    </Table>
  </div>
</template>
